<template>
    <div class="cinemaFlimSchedule">
        <div class="flimSwiper">
            <div class="filmPostBlurBgCont">
                <div class="filmPostBlurBg" :style="'background: url('+currentFilm.poster+')'"></div>
            </div>
            <van-swipe 
                :loop="false"
                @change="onChange"
                height="200"
                width='140'
                ref='flimSwiper'
                >
                <van-swipe-item></van-swipe-item>
                <van-swipe-item v-for='(item,index) in filmPostData' :key="index">
                    <div class="filmPostCont" :class='{"filmPostContFirst":index==0}'>
                        <div class="filmPost">
                            <img class="poster" :src="item.poster" alt="">
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item></van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/{{filmPostData.length}}</div>
                </template>
            </van-swipe>
        </div>
    
        <!-- 电影信息 -->
        <div class="filmInfoCont">
            <!-- @click='toFilmPage' -->
            <div class="filmInfoInnerCont" @click='toFilmPage'>
                <div class="filmInfo">
                    <div>{{currentFilm.name}}<span class="filmGrade">{{currentFilm.grade}}分</span></div>
                    <div class="filmMainInfo">
                        {{currentFilm.category}}&nbsp;|
                        {{currentFilm.runtime}}分钟&nbsp;|
                        {{currentFilm.director}}&nbsp;|
                        <span v-for='actor in currentFilm.actors'>
                            {{actor.name}}&nbsp;
                        </span>
                    
                    </div>
                </div>
                <div class="filmDetail">
                    <van-icon name="arrow" size="10" />
                </div>
            </div>
            
        </div>

        <!-- 排场信息 -->
        <div class="schedule">
                <!-- :sticky='true' -->
            <van-tabs 
                v-model="active"
                color="#ff5f16" 
                title-active-color="#ff5f16" 
                animated
                swipe-threshold='3'
                @click='scheduleTabChange'>
                <van-tab 
                    v-for="(item,index) in currentFilm.showDate" 
                    :key='item' 
                    :title="item | dateFilter"
                    >
                    <!-- 
                        advanceStopMins: 10
                        endAt: 1672301400
                        filmLanguage: "原声版"
                        hallName: "4DX特效1号激光厅"
                        imagery: "3D"
                        isOnsell: true
                        marketPrice: 8000
                        maxSalePrice: 5330
                        minSalePrice: 5330
                        salePrice: 5330
                        scheduleId: 271984003
                        showAt: 1672290000
                     -->
                <div class="empty" v-if='currentFilmSchedule.length===0'>
                    暂无数据
                </div>
                <div class="scheduleDetail" v-for='sub in currentFilmSchedule' :id='item'>
                    <div class="scheduleLeft scheduleOne">
                        <div>
                            <div>{{sub.showAt | timeFilter}}</div>
                            <div class='miniFont'>{{sub.endAt | timeFilter}}散场</div>
                        </div>
                        <div class="scheduleTwo">
                            <div>{{sub.filmLanguage+sub.imagery}}</div>
                            <div class='miniFont hallName'>{{sub.hallName}}</div>
                        </div>
                    </div>
                    <div class="scheduleRight scheduleOne">
                        <div>￥{{ sub.salePrice | priceFilter}}</div>
                        <div class="scheduleTwo">
                            <van-button color="#ff5f16" size='small' plain>购票</van-button>
                        </div>
                    </div>
                </div>
              </van-tab>
            </van-tabs>
        </div>
    </div>

</template>

<script>
    import Vue from 'vue'
    import moment from 'moment'
    import http from '@/util/http'



    Vue.filter('dateFilter', (date) => {
      return moment(date * 1000).format('LL')
    })

    Vue.filter('priceFilter', (price) => {
      price = price.toString().split("")
      price.splice(-2,0,'.')
      return price.join("")
    })

    Vue.filter('timeFilter', (time) => {
      return (new Date(time * 1000)).toString().split(' ')[4].slice(0,5)
    })
    export default{
        props:{
            cinemaId:{
                default:""
            },
            filmPostData:{
                type:Array,
                default:()=>[
                    {
                        name:"",
                        poster:'../../assets/noData.jpg'
                    },
                ]
            }
        },
        data() {
            return {
                current: 0,
                currentPoster:'',
                currentFilm:{
                    name:'未加载',
                    poster:"",
                    grade:'未加载'
                },
                active:0,
                // 储存 所有电影排场数据 提升用户体验
                // 格式
                // {
                //     filmList:["sa","sa","sa",],
                //     scheduleData:[
                //         {
                //             dateList:["sa","sa",],
                //             scheduleData:[[],[]]
                //         },
                //         {},
                //         {}
                //     ]
                // }
                filmSchedule:[],

                currentFilmSchedule:[]
            };
        },
        mounted(){
            window.addEventListener("resize", () => {  //根据屏幕进行实时绘制
                this.$refs.flimSwiper.resize();
            });

        },
        watch:{
            filmPostData(n,o){
                
                this.currentFilm = this.filmPostData[0]


                let temp = {
                    filmList:[],
                    scheduleData:[]
                }
                this.filmPostData.forEach(item=>{

                    temp.filmList.push(item.filmId)

                    let innerTemp = {
                        dateList:[],
                        scheduleData:[]
                    }


                    item.showDate.forEach(date=>{
                        innerTemp.dateList.push(date)
                        innerTemp.scheduleData.push([])
                    })

                    temp.scheduleData.push(innerTemp)

                })                
                this.filmSchedule = temp

                // console.log(this.filmSchedule)

                http({
                    url: `/gateway?filmId=${this.currentFilm.filmId}&cinemaId=${this.cinemaId}&date=${this.filmSchedule.scheduleData[0].dateList[0]}&k=4985470`,
                    headers: {
                        'X-Host': ' mall.film-ticket.schedule.list '
                    }
                }).then((res) => {
                    // this.cinemaInfo = res.data.data.cinema    


                    // console.log(res.data.data.schedules)

                    // 存储进 this.filmSchedule
                    this.filmSchedule.scheduleData[0].scheduleData[0] = res.data.data.schedules
                    // 并给 currentFilmSchedule 赋值
                    this.currentFilmSchedule = res.data.data.schedules

                }).catch(err=>{
                    console.log(err)
                })

            },
            // currentFilmSchedule(n,o){
            //     // console.log(n,o)
            // }
        },
        methods: {
            onChange(index) {
                // console.log("this.active",this.active)
                // this.active == 0
                // console.log("this.active",this.active)

                if(index === this.filmPostData.length){
                    index = this.filmPostData.length - 1
                }
                
                this.current = index;

                this.currentFilm = this.filmPostData[index]

                // console.log(this.currentFilm)
                this.scheduleTabChange(0)

            },
            scheduleTabChange(name,title){
                // 设置 标签索引
                this.active = name;

                let date;
                if(title){
                    // 提起 日期格式："2022年12月28日" ===>>> "2022/12/28"
                    date = title.match(/\d+(\.\d+)?/g).join("/")
                    // 转成时间戳
                    date = parseInt(new Date(date).getTime().toString().slice(0,10))
                }else{
                    let filmIndex = this.filmSchedule.filmList.indexOf(this.currentFilm.filmId)
                    // 根据"电影索引"获取"当前电影的所有日期"的排场信息
                    date = this.filmSchedule.scheduleData[filmIndex].dateList[name]
                }
                // console.log(this.currentFilm.filmId,"filmId",this.cinemaId,"cinemaId",date,"date")


                /*
                    // 储存 所有电影排场数据 提升用户体验
                    // 格式
                    // {
                    //     filmList:["sa","sa","sa",],
                    //     scheduleData:[
                    //         {
                    //             dateList:["sa","sa",],
                    //             scheduleData:[[],[]]
                    //         },
                    //         {},
                    //         {}
                    //     ]
                    // }
                */ 

                // 获取当前 电影id的索引
                let filmIndex = this.filmSchedule.filmList.indexOf(this.currentFilm.filmId)
                // 根据"电影索引"获取"当前电影的所有日期"的排场信息
                let scheduleAllData = this.filmSchedule.scheduleData[filmIndex]
                // 获取当前 日期的索引
                let dateIndex = scheduleAllData.dateList.indexOf(date)
                // 根据"日期索引"获取"当前电影的当前日期"的排场信息
                let scheduleCurrentData = scheduleAllData.scheduleData[dateIndex]
                // console.log(filmIndex,dateIndex,scheduleCurrentData)

                // 若已有数据，就退出啊
                if(scheduleCurrentData.length>0){
                    // 并给 currentFilmSchedule 赋值
                    this.currentFilmSchedule = scheduleCurrentData
                    return
                }

                // 没有数据，就发请求回来存储进 this.filmSchedule
                // https://m.maizuo.com/gateway/?filmId=6165&cinemaId=2888&date=1672070400&k=4985470
                // X-Host: mall.film-ticket.schedule.list

                http({
                    url: `/gateway?filmId=${this.currentFilm.filmId}&cinemaId=${this.cinemaId}&date=${date}&k=4985470`,
                    headers: {
                        'X-Host': ' mall.film-ticket.schedule.list '
                    }
                }).then((res) => {
                    // this.cinemaInfo = res.data.data.cinema    

                    // 存储进 this.filmSchedule
                    this.filmSchedule.scheduleData[filmIndex].scheduleData[dateIndex] = res.data.data.schedules
                    // 并给 currentFilmSchedule 赋值
                    this.currentFilmSchedule = res.data.data.schedules

                    // console.log("scheduleList",res.data.data.schedules)
                    // console.log("scheduleList",this.filmSchedule.scheduleData)
                    // console.log("+++++++++++++++++++++++++++++++++++++")

                }).catch(err=>{
                    console.log(err)
                })

            },
            toFilmPage() {
                console.log(this.currentFilm.filmId)
                let id = this.currentFilm.filmId
                this.$router.push({
                    name: 'lqDetail',
                    params: {
                      id
                    }
                })
            }
        },
    }
</script>   

<style lang="scss" scoped>
  .custom-indicator {
    display:none;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }


  .flimSwiper{
    position:relative;


    // 背景模糊
    .filmPostBlurBgCont{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:10px 0;
        box-sizing:border-box;
        // box-shadow: 0 0px 50px 30px #fff inset;
        overflow: hidden;
        .filmPostBlurBg{
            width:100%;
            height:100%;
            // background-color:black;
            background:url('../../assets/poster01.jpg');
            background-repeat: no-repeat;
            filter: blur(30px);
        }
    }

    

    .filmPostCont{

        height:100%;
        // background-color:#f1f1f1;
        display:flex;
        justify-content:center;
        align-items: center;
        // border: 1px solid;
        box-sizing: border-box;

        
        .filmPost{

            .poster{
                width:110px;
                height:160px;
                // box-shadow
            }
        }
    }

    .filmPostContFirst{
        // padding-left:50%;
    }
    .filmPostContLast{}
  }

  .filmInfoCont{
    display:flex;
    flex-direction: column;
    padding:10px 0 20px;
        position: sticky;
    top: calc(2.4rem + 88px);
    background-color: #fff;
    z-index: 999;

    .filmInfoInnerCont{
        display:flex;
        // padding:0px 0 20px;

    }

    .filmInfo{
        flex:1;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        font-weight:bold;


        .filmGrade{
            margin-left:10px;
            font-size: 16px;
            font-style: italic;
            color: #ffb232;
        }

        .filmMainInfo{
                margin-top: 10px;
                max-width: 15rem;
                font-size: 13px;
                font-weight: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color:#797d82;
        }

    }
    .filmDetail{
        display:flex;
        // flex-direction:column;
        justify-content: center;
        align-items:center;
    }
    
  }


  .schedule{
    // :deep(.van-tab){
    //     flex:none;
    // }
    // .van-tabs{
    //     background:black;
    //     .van-tab{
    //         flex:none;
    //     }
    // } 
        position: sticky;
    top: calc(2.4rem + 155px);
    background-color: #fff;


    

    .scheduleDetail{
        display:flex;
        justify-content: space-between;
        align-items:center;
        padding:18px 10px;
        border-top: 1px solid #f1f1f1;
        // border-bottom: 1px solid #f1f1f1;
        // justify-content: center;
        // background:black;

        .scheduleLeft{
            .miniFont{
                padding-top:5px;
                font-size:12px;
                color:#797d82;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 180px;
            }
            .hallName{
                // width: 95%;
            }
        } 
        .scheduleRight{
            color:#ff5f16;
        } 
        .scheduleOne{
            display:flex;
            align-items:center;

            .scheduleTwo{
                padding-left:20px;
            }
        }
    }

  }

  .empty{
    padding:20px 0;
    color:#797d82;
    display:flex;
    justify-content: center;
    align-items:center;
  }
</style>

<style lang="scss">
    .schedule{
        .van-tabs{
            // background-color:black;
            .van-tabs__wrap{
                .van-tabs__nav {

                    // background-color:black;
                }

            }
        }
    }
</style>
